<template>
<div class="header">

    <div class="header-left">
        <div class="iconfont">&#xe61d;</div>
    </div>

    <div class="header-input">

  <span class="iconfont">&#xe636;</span>
    输入城市/景点/游玩主题</div>

<router-link to='/city'>
    <div class="header-right">{{this.$store.state.city}}
   <span class="iconfont">&#xe614;</span>
    </div>
</router-link>
</div>
</template>


<script>
export default {
name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  @import '~styles/main.styl'

.header {
    display: flex;
    line-height: .86rem;
    background-color:$bgColor;
    color: #fff;
}

.header-left {
    width: .64rem;
    float: left;
    margin-left:.1rem;
}

.header-left .iconfont{
    font-size:.40rem;
    text-align:center
}

.header-input {
     flex: 1;
     height: .64rem;
     line-height: .64rem;
     margin-top: .12rem;
     margin-left: .10rem;
     background-color: #fff;
     border-radius: .1rem;
     color: #ccc;
}
    
.header-input .iconfont {
    padding-left: .2rem;
}    

.header-right {
    min-width: 1.04rem;
    padding:0 .1rem;
     float: right;
     text-align: center;
     color: #fff;
}   


</style>